$(function () {
  //渲染数据结构

  const form = layui.form
  const layer = layui.layer
  const id = localStorage.getItem('id')
  $.ajax({
    type: 'GET',
    url: '/my/article/cates',
    success: function (res) {
      renderSelect(res.data)
    }
  })
  function renderSelect(data) {
    let str = data.map(function (item) {
      return `
      <option value="${item.Id}">${item.name}</option>
      `
    }).join('')
    str = '<option value="">请选择文章类别</option>' + str
    //将str填充至页面结构中
    $('select[name="cate_id"]').html(str)
    form.render()
  }

  //富文本的初始化---设置时间，以便解决冲突
  if (id) {
    setTimeout(() => {
      initEditor()
    }, 800);
  } else {
    initEditor()
  }


  // 1. 初始化图片裁剪器
  var $image = $('#image')
  // 2. 裁剪选项
  var options = {
    aspectRatio: 400 / 280,
    preview: '.img-preview'
  }
  // 3. 初始化裁剪区域
  $image.cropper(options)

  $('#btnChooseImage').on('click', function () {
    $('#coverFile').click()
  })

  //更换裁剪后的图片
  $('#coverFile').on('change', function () {
    const files = $(this)[0].files
    if (files.length <= 0) {
      return layer.msg('请选择图片')
    }
    var newImgURL = URL.createObjectURL(files[0])
    $image
      .cropper('destroy')      // 销毁旧的裁剪区域
      .attr('src', newImgURL)  // 重新设置图片路径
      .cropper(options)        // 重新初始化裁剪区域
  })


  //发布页面的整个管理
  var art_state = '已发布'
  $('#btnSave2').on('click', function () {
    art_state = '草稿'
  })

  $('#form-pub').on('submit', function (e) {
    e.preventDefault()
    //发送请求
    const fd = new FormData($('#form-pub')[0])
    fd.append('state', art_state)
    $image
      .cropper('getCroppedCanvas', {
        // 创建一个 Canvas 画布
        width: 400,
        height: 280
      })
      .toBlob(function (blob) {
        // 将 Canvas 画布上的内容，转化为文件对象
        // 得到文件对象后，进行后续的操作
        // 5. 将文件对象，存储到 fd 中
        fd.append('cover_img', blob)
        // 6. 发起 ajax 数据请求 -----此处进行判断，是添加新文章还是更新原来的文章
        if (id) {
          //更新文章
          fd.append('Id', id)
          updataArt(fd)
        } else {
          // 添加新文章
          addArt(fd)
        }

      })
  })

  //添加新文章
  function addArt(fd) {
    $.ajax({
      url: '/my/article/add',
      type: 'POST',
      data: fd,
      contentType: false,
      processData: false,
      success: function (res) {
        console.log(res)
        if (res.status !== 0) {
          return layer.msg('添加文章失败')
        }
        // 成功--页面的跳转
        location.href = '/article/art_list.html'
      }
    })
  }

  //更新文章
  function updataArt(fd) {
    $.ajax({
      url: '/my/article/edit',
      type: 'POST',
      data: fd,
      contentType: false,
      processData: false,
      success: function (res) {
        console.log(res)
        if (res.status !== 0) {
          return layer.msg('更新文章失败')
        }
        // 将本地的id清除
        localStorage.removeItem('id')
        // 成功--页面的跳转
        location.href = '/article/art_list.html'
      }
    })
  }

  //通过发送的数据快速的渲染界面----编辑文章
  function getMsgId(id) {
    $.ajax({
      url: '/my/article/' + id,
      type: 'GET',
      success: function (res) {
        console.log(res)
        if (res.status !== 0) {
          return layer.msg('获取文章详情失败')
        }
        form.val('formAdd', res.data)
        //重新渲染原来的图片
        $image
          .cropper('destroy')      // 销毁旧的裁剪区域
          .attr('src', 'http://big-event-api-t.itheima.net' + res.data.cover_img)  // 重新设置图片路径
          .cropper(options)        // 重新初始化裁剪区域
      }
    })
  }

  //根据本地存储的id判断是否是编辑文章
  // const id = localStorage.getItem('id')
  if (id) {
    // ajax是异步，要等原本的结构加载完毕，除去富文本的初始化之外
    setTimeout(() => {
      getMsgId(id)
    }, 500);
  }


})